<script setup lang="ts">
import { reactive } from "vue";
import useRouterHook from "@/hooks/useRouterHook";
import { ProcessTypeEnum } from "../approveList/constants";

const { router } = useRouterHook();

const entryList = reactive([
	{
		name: "采购询比价定价申请",
		type: ProcessTypeEnum.INQUIRY
	},
	{
		name: "研发试制、采购申请",
		type: ProcessTypeEnum.PUR
	},
	{
		name: "用章使用申请",
		type: ProcessTypeEnum.STAMP
	}
]);

/** 点击入口 */
const handleClickEntry = (item: any) => {
	router.push({
		path: "/approveList",
		query: {
			type: item.type
		}
	});
};
</script>

<template>
	<ul class="entry-list">
		<li class="entry" v-for="(item, index) in entryList" :key="index" @click="handleClickEntry(item)">
			<van-icon name="cluster-o" size="20" />
			<span>{{ item.name }}</span>
		</li>
	</ul>
</template>

<style scoped lang="less">
.entry-list {
	width: 100%;
	display: flex;
	flex-wrap: wrap;

	.entry {
		width: 25%;
		margin: 0 10px;
		padding: 10px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		span {
			margin-top: 5px;
			text-align: center;
		}
	}
}
</style>
